<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
    
<sec:authentication property="principal" var="currentPrincipal" scope="page" />

<div class="modal-dialog x-modal-dialog" style="width: 1000px;">

  <div class="modal-content">

    <div class="modal-header x-breadcrumb clearfix">

      <h2><i class="glyphicon glyphicon-fire" title=""></i>&nbsp;&nbsp;<span>订单过滤</span></h2>

      <button type="button" class="close" data-dismiss="modal">&times;</button>

    </div>

    <form class="form-horizontal" method="GET" action="${ctx.host}/${type}-orders">

      <input type="hidden" name="filter" value="true" >
      <input type="hidden" name="status" value="${status}">
      <input type="hidden" name="siteId" value="${siteId}">
      <div class="modal-body">

        <div class="form-group x-form-group">
          <label class="col-xs-2 control-label">订单号</label>
          <div class="col-xs-3" style="width: 30%;">
            <input type="text" class="form-control" name="orderCode" value="${param.orderCode}" placeholder="支持模糊查询"/>
          </div>
          <c:if test="${status == 'pending' and type == 'online'}">
            <label class="col-xs-2 control-label">姓名</label>
            <div class="col-xs-3" style="width: 30%;">
              <input type="text" class="form-control" name="name" value="${param.name}" placeholder="支持模糊查询"/>
            </div>
          </c:if>
        </div>
        
        <div class="form-group x-form-group">
          <label class="col-xs-2 control-label">手机号</label>
          <div class="col-xs-3" style="width: 30%;">
              <input type="text" class="form-control" name="mobile" value="${param.mobile}" placeholder="支持模糊查询"/>
          </div>
          <label class="col-xs-2 control-label">支付状态</label>
          <div class="col-xs-3" style="width: 30%;">
            <select name="paymentStatus" class="form-control" data-validate="required">
              <option value=""></option>
                <option value="unpaid" ${param.paymentStatus == 'unpaid' ? 'selected' : ''}>待支付</option>
                <option value="paid" ${param.paymentStatus == 'paid' ? 'selected' : ''}>已支付</option>
                <option value="refunding" ${param.paymentStatus == 'refunding' ? 'selected' : ''}>待退款</option>
                <option value="refunded" ${param.paymentStatus == 'refunded' ? 'selected' : ''}>已退款</option>
                <option value="systemRefunded" ${param.paymentStatus == 'systemRefunded' ? 'selected' : ''}>系统已退款</option>
                <option value="canceled" ${param.paymentStatus == 'canceled' ? 'selected' : ''}>系统取消</option>
            </select>
          </div>
        </div>

        <div class="form-group x-form-group">
          <label class="col-xs-2 control-label">下单时间</label>
          <div class="col-xs-3" style="width: 60%;">
            <div class="input-group">
              <input type="text" class="form-control date" name="createTimeStart" value="${param.createTimeStart}" placeholder="开始时间"/>
              <span class="input-group-addon"></span>
              <input type="text" class="form-control date" name="createTimeEnd" value="${param.createTimeEnd}" placeholder="结束时间"/>
            </div>
          </div>
        </div>

      <div class="modal-footer">
        <button type="submit" class="btn btn-success btn-shadow btn-shadow-success x-btn">查询</button>&nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" class="btn btn-default btn-shadow btn-shadow-default x-btn" data-dismiss="modal">取消</button>
      </div>
      
      </div>

    </form>

  </div>

</div>

<script type="text/javascript">

  $(function() {
    
    $('.date').datetimepicker({
      format: 'yyyy-mm-dd',
      autoclose: true,
      language: 'zh-CN',
      todayBtn: 'linked',
      todayHighlight: true,
      pickerPosition: 'bottom-right',
      minView: 'month'
    })
    
    $('#select-city').select2({
      minimumResultsForSearch : -1,
      allowClear : true,
      width: '100%'
     });
    
    $('select[name="orderStatus"]').select2({
        placeholder : '请选择订单状态',
        minimumResultsForSearch : 5,
        allowClear : true,
      });
    
    $('select[name="paymentStatus"]').select2({
        placeholder : '请选择支付状态',
        minimumResultsForSearch : 5,
        allowClear : true,
      });
    
  })
</script>
